<template>
  <el-drawer
    v-model="dashboard.isDrawerShow"
    :show-close="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }"> </template>
    <div v-for="item in state.rows" :key="item.id">
      <div class="header">
        <h4>{{ item.code }}</h4>
        <el-button
          :type="
            item.state === 0
              ? 'info'
              : item.state === 1
              ? 'success'
              : item.state === 2
              ? 'warning'
              : 'danger'
          "
          @click="toggle(item)"
        >
          <el-icon class="el-icon--left"><ArrowRightBold /></el-icon>
          {{
            item.state === 0
              ? "离线"
              : item.state === 1
              ? "在线"
              : item.state === 2
              ? "未激活"
              : "已退回"
          }}
        </el-button>
      </div>
      <div class="devicesMap">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="编号">
            {{ item.code }}
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            {{ item.addr }}
          </el-descriptions-item>
          <el-descriptions-item label="产品名称">
            {{ item.name }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ item.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject, onBeforeUnmount } from "vue";
import { ElButton, ElDrawer } from "element-plus";
import { useRouter } from "vue-router";
import { BaiduMap, BmMarker } from "vue-baidu-map-3x"; //baidu-map组件red
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useDashboard } from "@/store/backend/dashboard";
import { useBackendMonitor } from "@/store/backend/EquipM/monitor"; //实时设备监控仓库
import { useAccess } from "@/store/backend/DeviceM/access";
import { useBusiness } from "@/store/backend/BusinessM/info";
import { useBigBoardB } from "@/store/backend/BigBoard/bigBoard2";
import { useRegion } from "@/store/backend/SysM/region";

const { proxy } = useCurrentInstance(); //全局事件总线
const dashboard = useDashboard();
const router = useRouter();
const monitor = useBackendMonitor();
const access = useAccess();
const bb = useBigBoardB();
const region = useRegion();

interface Props {
  modelValue: boolean;
  devices: any;
}
interface Info {
  addr: string;
  code: string;
  id: number;
  lat: number;
  lng: number;
  name: string;
  productName: string;
  remark: null | null;
  state: number;
  location: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  devices: () => {
    return {};
  },
});

const state: { info: any; rows: any[] } = reactive({
  info: {
    addr: "",
    code: "",
    id: 0,
    lat: 0,
    lng: 0,
    name: "",
    productName: "",
    remark: "",
    state: 0,
    location: {},
  },
  rows: [],
});
const handleClose = (done: () => void) => {
  done();
  dashboard.isDrawerShow = false;
  state.info = {
    addr: "",
    code: "",
    id: 0,
    lat: 0,
    lng: 0,
    name: "",
    productName: "",
    remark: "",
    state: 0,
    location: {},
  };
};
const toggle = (row: any) => {
  //从后台获取该设备数据跳转详情页
  monitor
    .getnowList({ eid: row.gatewaycode })
    .then((res) => {
      access.getDeviceByGateway(row.code, region.regionIds).then((res: any) => {
        console.log("地图", res);
        //处理coordinate坐标系
        // res.data.coordinate = JSON.parse(res.data.coordinate);
        res.rows[0].coordinate = JSON.parse(res.rows[0].coordinate);
        monitor.deviceData = res.rows[0];
        //为基本信息处理所属企业Map数据格式问题
        const business = useBusiness();
        const { companyList } = business;
        if (companyList.length === 0) {
          //为空就重新获取企业列表数据
          business.getCompanyList();
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
  router.push({
    path: "/admin/EquipM/Monitordetail",
    query: { eid: row.gatewaycode },
  });
};
const gettheSameAddrData = (addr: string) => {
  bb.getAllDevices(
    { pageSize: 10000, regions: region.regionIds + "", addr },
    false
  ).then((res: any) => {
    console.log("相同地址设备", res);
    state.rows = res;
  });
};
onMounted(() => {
  proxy.eventBus.on("DevicesInfo", (data: any) => {
    state.info = data;
    gettheSameAddrData(data.addr);
  });
  dashboard.isDrawerShow = false;
});
onBeforeUnmount(() => {
  proxy.eventBus.off("DevicesInfo");
});
</script>

<style lang="scss" scoped>
.devicesMap {
  .map {
    left: 0px;
    top: 0px;
    z-index: 9;
    overflow: hidden;
    width: 100%;
    height: 200px;
  }
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
